<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-24 21:36:39
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-25 17:12:15
-->
<template>
    <div>
        <logSearchVue :loadData="loadData" :page="page" :pageSize="pageSize" />

        <logTableVue :data="data" :total="total" :loadData="loadData" :page="page" :pageSize="pageSize"
            @systemedit="systemedit" />
    </div>
    <el-dialog v-model="syseditdialogVisible" :show-close="false" :close-on-click-modal="false">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <span :id="titleId" :class="titleClass">编辑日志</span>
                <el-icon @click="close" class="closestylus">
                    <Close />
                </el-icon>
            </div>
        </template>
        <logEditVue :setDialogVisible="setDialogVisible" @colse-dialog-from="colseDialogFrom" :followId="followId" />
    </el-dialog>
    <div class="gap"></div>
</template>

<script setup lang="ts">
import logTableVue from './ui/logTable.vue'
import logSearchVue from './ui/logSearch.vue'
import { useRoute, useRouter } from "vue-router";
import { usePermissionList, userDialogVisible } from "./hooks";
import { reactive, ref } from "vue";
import logEditVue from './ui/logEdit.vue';
interface IProps {
    page: number
    pageSize: number
}
const props = withDefaults(defineProps<IProps>(), {
    page: 1,
    pageSize: 10
})
const route = useRoute()
const router = useRouter()
const [syseditdialogVisible, setDialogVisible] = userDialogVisible()
const [data, total, loadData] = usePermissionList(props.page, route.query as object, props.pageSize)

//编辑
const followId = ref<string>('')
const systemedit = (systemId: string, item: number) => {
    console.log(systemId)
    followId.value = systemId
    if (item === 10) {
        syseditdialogVisible.value = true
    }

}
const colseDialogFrom = () => {

}

</script>

<style lang="scss" scoped>
.el-overlay {
    .el-overlay-dialog {
        .el-dialog {

            .el-dialog__header {
                width: 100%;
                margin: 0;
                padding: 0;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: red;

                .my-header {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    text-align: center;

                    span {
                        width: 90%;
                        text-align: center;
                    }

                    i {
                        margin-right: 10px;
                    }


                }
            }
        }
    }

}

.closestylus {
    cursor: pointer;
}
</style>